<template>
  <WidgetContainer class="rss-widget"
                   :data="data"
                   :context-menu="contextMenu"
                   :show-loading="isLoading"
  >
    <q-card class="q-pa-sm full-height column">
      <div class="full-width text-h6 ellipsis widget-header relative-position">
        <q-btn flat dense icon="open_in_new" @click="openLink(rssFeedData.link)"></q-btn>
        <span>{{ rssWidgetData.data.title || rssFeedData.title }}</span>
        <div class="absolute-right" v-if="rssWidgetData.w > 2">
          <q-icon :color="hideLeft===false?'green':''" class="cursor-pointer widget-header__append-icon"
                  name="crop_original"
                  @click="hideLeft=!hideLeft">
            <q-tooltip content-class="bg-primary" :offset="[10, 10]">在左侧边栏显示预览图</q-tooltip>
          </q-icon>
        </div>
      </div>
      <div class="col scroll hide-scrollbar full-width">
        <q-card bordered class="q-pa-sm q-mb-sm"
                v-for="item in resItems" :key="item.title+item.author">
          <q-card-section horizontal>
            <div v-if="item.preview && sizeAllowLeft && !hideLeft" class="rss-preview overflow-hidden"
                 style="width: 150px;height: 100px">
              <div v-if="item.preview" v-html="item.preview"></div>
              <q-img v-else
                     src="https://placeimg.com/500/300/nature"
                     style="width: 150px;height: 100px;"
                     :ratio="1"
                     basic
                     spinner-color="white"
                     class="rounded-borders"
              >
                <div class="absolute-bottom-right text-center" style="padding: 4px;font-size: 12px">无预览</div>
              </q-img>
            </div>
            <div class="col q-px-sm overflow-hidden">
              <div>
                <span class="text-bold">{{ item.title }}</span>
              </div>
              <div class="text-body2">
                <q-banner class="bg-grey-1" style="padding: 4px;min-height: auto">
                  <span v-if="item.pubDate">{{ $filters.dateTimeFormat(item.pubDate) }}</span>
                  <q-chip v-if="item.author" dense size="sm" icon="draw">{{ item.author }}</q-chip>
                </q-banner>
              </div>
              <div class="ellipsis text-cyan">
                <a :href="item.link" target="_blank">{{ item.link }}</a>
              </div>
              <div class="ellipsis-3-lines rss-description text-body2" v-if="!item.preview"
                   v-html="item.description"></div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </q-card>
    <RssWidgetEditForm v-model="formData"
                       v-model:show="formShow"
                       mode="update"
    ></RssWidgetEditForm>
  </WidgetContainer>
</template>

<script>

import WidgetContainer from '../components/WidgetContainer.vue'
import RssWidgetEditForm from './management/RssWidgetEditForm.vue'
import iUtil from '../../../api/util'
import widget from 'src/mixins/widget'

export default {
  name: 'RssWidget',
  mixins: [widget],
  components: {
    RssWidgetEditForm,
    WidgetContainer
  },
  props: {
    data: Object
  },
  data () {
    const widgetData = this.data.data || {}
    return {
      /** @type RssFeedData */
      rssFeedData: {
        title: '', // 标题
        updated: '', // 更新时间
        link: '', // 站点链接
        description: '', // 描述
        atomlink: '', // 子链接
        lastBuildDate: '', // 订阅源构建时间
        item: []
      },
      /** @type RssItem[] */
      resItems: [],
      isLoading: false,
      hideLeft: widgetData.hideLeft,
      contextMenu: [],
      formShow: false
    }
  },
  created () {
    // [?] 如果放在 data 中，TS 会报错
    // 报错: Property 'formShow' does not exist on type 'Readonly<{ data: RssWidgetData; }> & Vue'.
    this.contextMenu = [
      {
        label: '编辑组件',
        onClick: () => {
          this.formShow = true
        }
      }
    ]
  },
  // 如果存在 computed 属性， TS 解析 this 会异常
  computed: {
    rsshubUrl () {
      return this.data.data.rsshubUrl
    },
    sizeAllowLeft () {
      return this.data.w > 2
    },
    rssWidgetData () {
      return this.data
    }
  },
  watch: {
    hideLeft () {
      this.formData.data = {
        ...this.data.data,
        hideLeft: this.hideLeft
      }
      this.saveWidget()
    },
    rsshubUrl () {
      this.initRss()
    }
  },
  mounted () {
    this.initRss()
  },
  methods: {
    async initRss () {
      const rsshubUrl = this.data.data.rsshubUrl
      try {
        this.isLoading = true
        this.rssFeedData = await iUtil.rsshub({
          rsshubUrl: rsshubUrl
        })
        this.resItems = this.rssFeedData.item.slice(0, 10).map(item => {
          const regImage = /<img[^>]*>/
          // const regIframe = /<iframe[^>]*>/;
          item.description = item.description || ''
          item.preview = (item.description.match(regImage) || [null])[0]
          return item
        })
      } finally {
        this.isLoading = false
      }
    },
    async openLink (url) {
      window.open(url, '_blank')
    }
  }
}
</script>

<style lang="scss">

.rss-widget {
  .rss-preview {

    iframe {
      width: 100% !important;
      height: 100% !important;
    }

    img {
      width: 100% !important;
      height: 100% !important;
    }

  }

  .rss-description {
    h1, h2, h3, h4, h5, h6 {
      font-size: 1rem !important;
      padding: 0;
      margin: 0;
      line-height: 1.2rem;
    }
  }
}

</style>
